use std::cell::Cell;
use std::rc::Rc;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
use std::collections::HashMap;
use web_sys::DomParser;
use web_sys::SupportedType;
use web_sys::NamedNodeMap;
use web_sys::Attr;
use std::sync::Mutex; 
use std::error::Error;
use std::fs::File;
use std::io::Read;
use std::time::{SystemTime, UNIX_EPOCH};

// When the `wee_alloc` feature is enabled, this uses `wee_alloc` as the global
// allocator.
//
// If you don't want to use `wee_alloc`, you can safely delete this.
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

#[macro_use]
extern crate lazy_static; 
include!("facecat.rs");

#[wasm_bindgen]
extern {
    fn alert(s: &str);
}

#[wasm_bindgen]
extern {
	#[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

/*
* Paint event
* context:Drawing context
* view:View
* clip_rect:Crop area
*/
pub fn on_paint(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, clip_rect:FCRect){
	on_paint_default(context, view.clone(), clip_rect.clone());
}

/*
* Paint border event
* context:Drawing context
* view:View
* clip_rect:Crop area
*/
pub fn on_paint_border(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, clip_rect:FCRect){
	on_paint_border_default(context, view.clone(), clip_rect.clone());
}

/*
* Mouse down event
* context:Drawing context
* view:View
* mp:Coordinate
* buttons:Buttons
* clicks:Click count
* delta:Delta
*/
pub fn on_mouse_down(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, mp:FCPoint, buttons:i32, clicks:i32, delta:i32){
	on_mouse_down_default(context, view.clone(), mp.clone(), buttons, clicks, delta);
}

/*
* Mouse move event
* context:Drawing context
* view:View
* mp:Coordinate
* buttons:Buttons
* clicks:Click count
* delta:Delta
*/
pub fn on_mouse_move(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, mp:FCPoint, buttons:i32, clicks:i32, delta:i32){
	on_mouse_move_default(context, view.clone(), mp.clone(), buttons, clicks, delta);
}

/*
* Mouse up event
* context:Drawing context
* view:View
* mp:Coordinate
* buttons:Buttons
* clicks:Click count
* delta:Delta
*/
pub fn on_mouse_up(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, mp:FCPoint, buttons:i32, clicks:i32, delta:i32){
	on_mouse_up_default(context, view.clone(), mp.clone(), buttons, clicks, delta);
}

/*
* Click event
* context:Drawing context
* view:View
* first_touch:Coordinate
* first_point:Buttons
* second_touch:Click count
* second_point:Delta
*/
pub fn on_click(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, first_touch:bool, first_point:FCPoint, second_touch:bool, second_point:FCPoint, clicks:i32){
	on_click_default(context, view.clone(), first_touch, first_point.clone(), second_touch, second_point.clone(), clicks);
}

/*
* Mouse wheel event
* context:Drawing context
* view:View
* mp:Coordinate
* buttons:Buttons
* clicks:Click count
* delta:Delta
*/
pub fn on_mouse_wheel(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, mp:FCPoint, buttons:i32, clicks:i32, delta:i32){
	on_mouse_wheel_default(context, view.clone(), mp.clone(), buttons, clicks, delta);
}

/*
* Touch start event
* context:Drawing context
* view:View
* first_touch:Coordinate
* first_point:Buttons
* second_touch:Click count
* second_point:Delta
*/
pub fn on_touch_start(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, first_touch:bool, first_point:FCPoint, second_touch:bool, second_point:FCPoint){
	on_touch_start_default(context, view.clone(), first_touch, first_point.clone(), second_touch, second_point.clone());
}

/*
* Touch move event
* context:Drawing context
* view:View
* first_touch:Coordinate
* first_point:Buttons
* second_touch:Click count
* second_point:Delta
*/
pub fn on_touch_move(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, first_touch:bool, first_point:FCPoint, second_touch:bool, second_point:FCPoint){
	on_touch_move_default(context, view.clone(), first_touch, first_point.clone(), second_touch, second_point.clone());
}

/*
* Touch end event
* context:Drawing context
* view:View
* first_touch:Coordinate
* first_point:Buttons
* second_touch:Click count
* second_point:Delta
*/
pub fn on_touch_end(context:&std::rc::Rc<web_sys::CanvasRenderingContext2d>, view:FCView, first_touch:bool, first_point:FCPoint, second_touch:bool, second_point:FCPoint){
	on_touch_end_default(context, view.clone(), first_touch, first_point.clone(), second_touch, second_point.clone());
}

/*
* Start rust
*/
#[wasm_bindgen(start)]
pub fn start() -> Result<(), JsValue> {
    let window = web_sys::window().expect("should have a window in this context");
    let document = window.document().expect("window should have a document");
    let canvas = document
        .create_element("canvas")?
        .dyn_into::<web_sys::HtmlCanvasElement>()?;
    let device_pixel_ratio = window.device_pixel_ratio();
    document.body().unwrap().append_child(&canvas)?;
    canvas.style().set_property("position", "fixed")?;
    canvas.style().set_property("left", "0px")?;
    canvas.style().set_property("top", "0px")?;
	unsafe{
        M_CANVAS_WIDTH = window.inner_width().unwrap().as_f64().unwrap() as f32;
        M_CANVAS_HEIGHT = window.inner_height().unwrap().as_f64().unwrap() as f32;
        if M_CANVAS_WIDTH < M_CANVAS_HEIGHT {
            M_IS_MOBILE = true;
            M_PAINT.lock().unwrap().scale_factor_x = 2.5;
            M_PAINT.lock().unwrap().scale_factor_y = 2.5;
        }
		canvas.set_width((M_CANVAS_WIDTH * device_pixel_ratio as f32) as u32);
		canvas.set_height((M_CANVAS_HEIGHT * device_pixel_ratio as f32) as u32);
		canvas.style().set_property(&("width".to_string()), &(M_CANVAS_WIDTH.to_string() + "px")).unwrap();
		canvas.style().set_property(&("height".to_string()), &(M_CANVAS_HEIGHT.to_string() + "px")).unwrap();
	}
    let context = canvas
        .get_context("2d")?
        .unwrap()
        .dyn_into::<web_sys::CanvasRenderingContext2d>()?;
	context.scale(device_pixel_ratio, device_pixel_ratio).unwrap();
    let context = Rc::new(context);
    let pressed = Rc::new(Cell::new(false));

    { mouse_down(&context, &pressed, &canvas); }
    { mouse_move(&context, &pressed, &canvas); }
    { mouse_up(&context, &pressed, &canvas); }
    { mouse_wheel(&context, &pressed, &canvas); }
    { touch_start(&context, &pressed, &canvas); }
    { touch_move(&context, &pressed, &canvas); }
    { touch_end(&context, &pressed, &canvas); }
    let xml = r#"<?xml version="1.0" encoding="UTF-8"?>
        <html xmlns="facecat">
          <head>
          </head>
          <body>
            <div type="splitlayout" name="divAll" candragsplitter="true" layoutstyle="toptobottom" dock="fill" size="400,505" splitterposition="0,80,400,80" bordercolor="none">
              <div type="tab" name="tabTradeAccount" bordercolor="none" backcolor="none">
                <div type="tabpage" name="pageTradeAccount" text="Position" headersize="100,0" backcolor="none" bordercolor="none" padding="5,5,5,5">
                  <table name="gridTradeAccount" dock="fill" headerheight="70" showhscrollbar="false" bordercolor="none">
                    <tr>
                      <th name="colF1" text="colF1" width="120" location="0,0" size="120,70"/>
                      <th name="colF2" text="colF2" width="120"/>
                      <th name="colF3" text="colF3" width="120"/>
                      <th name="colF4" text="colF4" width="120" location="240,0" size="120,70"/>
                      <th name="colF5" text="colF5" width="120"/>
                      <th name="colF6" text="colF6" width="120"/>
                      <th name="colF7" text="colF7" width="120"/>
                      <th name="colF8" text="colF8" width="120"/>
                      <th name="colF9" text="colF9" width="120"/>
                      <th name="colF10" text="colF10" width="120"/>
                      <th name="colF11" text="colF11" width="120"/>
                      <th name="colF12" text="colF12" width="120"/>
                      <th name="colF13" text="colF13" width="120"/>
                      <th name="colF14" text="colF14" width="120"/>
                      <th name="colF15" text="colF15" width="120"/>
                      <th name="colF16" text="colF16" width="120"/>
                      <th name="colF17" text="colF17" width="120"/>
                      <th name="colF18" text="colF18" width="120"/>
                      <th name="colF19" text="colF19" width="120"/>
                      <th name="colF20" text="colF20" width="120"/>
                      <th name="colF21" text="colF21" width="120"/>
                    </tr>
                  </table>
                </div>
              </div>
              <div type="splitlayout" name="divBottom" candragsplitter="true" layoutstyle="bottomtotop" size="400,450" splitterposition="0,430,400,430" bordercolor="none" backcolor="none">
                <div name="divStatus" size="966,17">
                  <label name="lblTradingTime" text="--" location="3,2" size="100,20" font="Default,12"/>
                  <label name="lbllog" text="--" location="105,2" size="352,20" font="Default,12"/>
                </div>
                <div type="splitlayout" name="divMiddle" candragsplitter="true" layoutstyle="toptobottom" size="600,600" splitmode="percentsize" splitterposition="0,450,400,450" bordercolor="none" backcolor="none">
                  <div type="splitlayout" name="divMiddleTop" candragsplitter="true" layoutstyle="bottomtotop" size="600,600" splitterposition="0,330,400,330" bordercolor="none" backcolor="none">
                    <div bordercolor="none" padding="5,5,5,5" backcolor="none">
                      <div type="splitlayout" name="divMain" dock="fill" candragsplitter="true" layoutstyle="lefttoright" size="420,420" splitterposition="310,0,310,300" bordercolor="none" backcolor="none">
                        <div bordercolor="none" backcolor="none" padding="0,0,5,0">
                          <div type="tab" name="tabTradeMain" selectedindex="0" location="0,0" size="1166,270" dock="fill">
                            <div type="tabpage" name="pageTrade" text="StandardTrade" backcolor="none" bordercolor="none">
                              <div name="divTrade" size="310,250" dock="fill" location="0,0" bordercolor="none" backcolor="none">
                                <label name="lblContract" text="Code" location="8,18" size="37,20" font="Default,14"/>
                                <label name="lblBuySell" text="BidSell" location="8,49" size="38,19" font="Default,14"/>
                                <input type="button" name="btnOpenCloseMode" text="Auto" location="3,76" size="46,20"/>
                                <label name="lblVolume" text="Volume" location="8,109" size="38,19" font="Default,14"/>
                                <input type="radio" name="rbOpen" backcolor="rgba(43,138,195,100)" checked="true" text="Open" location="52,76" size="65,20" groupname="OpenClose"/>
                                <input type="radio" name="rbCloseToday" text="CloseToday" location="120,76" size="65,20" groupname="OpenClose"/>
                                <input type="radio" name="rbClose" text="Close" location="182,76" size="65,20" groupname="OpenClose"/>
                                <input type="radio" name="rbBuy" backcolor="rgba(255,0,0,100)" checked="true" text="Bid" location="53,47" size="64,20" groupname="BuySell"/>
                                <input type="radio" name="rbSell" text="Sell" location="119,47" size="64,20" groupname="BuySell"/>
                                <input type="text" name="txtIssueCode" font="Default,20" location="53,11" size="163,28" lineheight="28" multiline="false"/>
                                <input type="checkbox" name="cbLock" text="Lock" location="220,15" size="73,20" canfocus="false" buttonsize="16,16"/>
                                <input type="range" name="spinVolume" font="Default,20" digit="0" location="52,102" size="115,28" lineheight="28" maximum="100000000" minimum="1" textalign="far"/>
                                <input type="range" name="spinPrice" digit="2" font="Default,20" location="52,142" size="115,24" lineheight="28" maximum="100000000" textalign="far"/>
                                <input type="button" name="btnOrder" font="Default,16" text="Order" backcolor="rgb(15,193,118)" location="8,179" size="211,48"/>
                                <input type="button" name="btnCancel" text="Cancel" location="226,184" backcolor="rgb(248,73,96)" size="74,24" font="Default,12"/>
                                <input type="button" name="btnPreCondition" text="Condition" location="226,209" size="74,23" font="Default,12"/>
                                <label name="lblLess" text="&lt;=" location="185,104" size="26,21" font="Default,16"/>
                                <label name="lblMaxVolume" text="0" location="206,104" size="16,21" font="Default,16"/>
                                <label name="lblUp" text="0" location="188,121" size="100,20" opacity="1"/>
                                <label name="lblAskPrice" text="0" location="188,135" size="53,20"/>
                                <label name="lblBidPrice" text="0" location="188,149" size="51,21"/>
                                <label name="lblDown" text="0" location="188,163" size="48,20"/>
                                <label name="Label" text="/" location="241,136" size="17,20" font="Default,12"/>
                                <label name="Label1" text="/" location="239,150" size="16,20" font="Default,12"/>
                                <label name="lblAskVolume" text="0" location="250,136" size="57,18"/>
                                <label name="lblBidVolume" text="0" location="250,150" size="57,20"/>
                                <input type="button" name="btnTradeMode" text="Follow" location="3,143" size="46,20"/>
                              </div>
                            </div>
                            <div type="tabpage" name="pageTradeSetting" text="Settings" backcolor="none" bordercolor="none">
                              <div name="divTradeSettings" dock="fill" backcolor="none" bordercolor="none">
                                <input type="checkbox" name="cbStartFastTrading" text="StartFastTrade" location="171,66" size="115,20" checked="true"/>
                                <input type="button" name="btnHotKeySetting" font="Default,12" text="FastTradeSettings" location="14,59" size="155,30"/>
                                <input type="button" name="btnAutoCloseSetting" font="Default,12" text="AutoCloseSttings" location="14,96" size="155,30"/>
                                <input type="button" name="btnAllCloseOrCancelSetting" font="Default,12" text="AllCloseOrCancelSetting" location="14,134" size="155,30"/>
                                <input type="button" name="btnAutoCancelSetting" font="Default,12" text="AutoCancelSetting" location="14,172" size="155,30"/>
                                <input type="button" name="btnDefaultVolumeSetting" font="Default,12" text="DefaultVolumeSetting" location="14,22" size="155,30"/>
                                <input type="checkbox" name="cbStartAutoClose" text="StartAutoClose" location="171,103" size="113,20" checked="true"/>
                                <input type="checkbox" name="cbStartAutoCancel" text="StartAutoCancel" location="173,172" size="110,21" checked="true"/>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div type="splitlayout" name="divMain" dock="fill" candragsplitter="true" layoutstyle="righttoleft" size="420,420" splitterposition="100,0" bordercolor="none" backcolor="none">
                          <div bordercolor="none" backcolor="none" padding="5,0,0,0">
                            <div type="tab" name="tabOrder2" selectedindex="1" dock="fill">
                              <div type="tabpage" name="pageChart" text="Chart" bordercolor="none" backcolor="none">
                                <div type="splitlayout" name="divChart" dock="fill" layoutstyle="toptobottom" size="400,400" splitterposition="0,30,400,30" bordercolor="none" backcolor="none">
                                  <div bordercolor="none" backcolor="none">
                                    <label name="lblKLineCode" text="cu1906" location="10,7" size="56,22" font="Default,14"/>
                                    <input type="radio" name="rbday" text="DayLine" location="427,6" size="68,20"/>
                                    <input type="radio" name="rb5m" text="5M" location="104,6" size="72,20" checked="True"/>
                                    <input type="radio" name="rb15m" text="15M" location="181,6" size="74,20"/>
                                    <input type="radio" name="rb30m" text="30M" location="262,6" size="70,20"/>
                                    <input type="radio" name="rb60m" text="60M" location="341,6" size="75,20"/>
                                  </div>
                                  <chart name="chart" dock="fill"/>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div type="tab" name="tabOrder" selectedindex="1">
                            <div type="tabpage" name="pageNoTrade" text="NoTrade" backcolor="none" bordercolor="none">
                              <div type="splitlayout" name="divNoTrade" dock="fill" layoutstyle="righttoleft" size="400,400" splitterposition="320,0,320,400" backcolor="none" bordercolor="none">
                                <div name="divCancelOrder" location="285,0" size="78,338" backcolor="none" bordercolor="none">
                                  <input type="button" name="btnCancelOrder" checked="true" size="60,60" text="Cancel" location="7,12"/>
                                  <input type="button" name="btnCancelAllOrders" location="7,75" size="60,60" text="CancelAll"/>
                                </div>
                                <table name="gridNoTrade" location="122,50" size="209,248" backcolor="none" bordercolor="none">
                                  <tr>
                                    <th name="colU11" columntype="no" horizontalalign="far" text="colU11" allowsort="false" width="80"/>
                                    <th name="colU1" columntype="text" text="colU1" width="80"/>
                                    <th name="colU2" columntype="text" text="colU2" width="80"/>
                                    <th name="colU3" columntype="text" horizontalalign="center" text="colU3" width="60"/>
                                    <th name="colU4" columntype="text" horizontalalign="center" text="colU4" width="60"/>
                                    <th name="colU5" columntype="int" horizontalalign="far" text="colU5" width="80"/>
                                    <th name="colU6" columntype="int" horizontalalign="far" text="colU6" width="80"/>
                                    <th name="colU7" columntype="double" horizontalalign="far" text="colU7" width="80"/>
                                    <th name="colU8" columntype="text" horizontalalign="center" text="colU8" width="80"/>
                                    <th name="colU9" columntype="double" horizontalalign="far" text="colU9" width="80"/>
                                    <th name="colU10" columntype="double" horizontalalign="far" text="colU10" width="80"/>
                                    <th name="colU12" columntype="text" text="colU12" width="80"/>
                                    <th name="colU13" columntype="text" horizontalalign="center" text="colU13" width="60"/>
                                    <th name="colU14" columntype="int" horizontalalign="far" text="colU14" width="60"/>
                                    <th name="colU15" columntype="text" text="colU15" width="100"/>
                                    <th name="colU16" columntype="text" text="colU16" width="100"/>
                                    <th name="colU17" columntype="text" text="colU17" width="80"/>
                                    <th name="colU18" columntype="text" horizontalalign="center" text="colU18" width="100"/>
                                    <th name="colU19" columntype="double" text="colU19" width="80"/>
                                    <th name="colU20" columntype="text" horizontalalign="center" text="colU20" width="80"/>
                                    <th name="colU21" columntype="text" text="colU21" width="80"/>
                                    <th name="colU22" columntype="text" text="colU22" width="80"/>
                                    <th name="colU23" columntype="text" text="colU23" width="200"/>
                                    <th name="colU24" columntype="text" text="colU24" width="80"/>
                                    <th name="colU25" columntype="text" text="colU25" width="100"/>
                                    <th name="colU26" columntype="text" text="colU26" width="80"/>
                                  </tr>
                                </table>
                              </div>
                            </div>
                            <div type="tabpage" name="pageAllOrders" text="AllOrder" backcolor="none" bordercolor="none">
                              <div type="splitlayout" name="divOrder" dock="fill" layoutstyle="bottomtotop" size="400,400" splitterposition="0,370,400,370" backcolor="none" bordercolor="none">
                                <div name="divDealRecordType" backcolor="none" bordercolor="none">
                                  <input type="radio" name="rdAllOrders" groupname="allOrders" checked="true" location="0,6" text="AllOrders" size="100,20"/>
                                  <input type="radio" name="rdOrder" groupname="allOrders" location="100,6" text="Order" size="100,20"/>
                                  <input type="radio" name="rdDeal" groupname="allOrders" location="200,6" text="Deal" size="100,20"/>
                                  <input type="radio" name="rdCancel" groupname="allOrders" location="300,6" text="Cancel" size="120,20"/>
                                  <input type="button" name="btnCancelOrder2" location="450,2" size="100,26" text="Cancel"/>
                                  <input type="button" name="btnCancelAllOrder2" location="570,2" size="100,26" text="CancelAll"/>
                                </div>
                                <table name="gridOrder" dock="Fill" size="569,330" backcolor="none" bordercolor="none">
                                  <tr>
                                    <th name="colA17" columntype="no" horizontalalign="far" text="colA17" allowsort="false" width="80"/>
                                    <th name="colA1" columntype="text" text="colA1" width="80"/>
                                    <th name="colA2" columntype="text" text="colA2" width="80"/>
                                    <th name="colA3" columntype="text" horizontalalign="center" text="colA3" width="60"/>
                                    <th name="colA4" columntype="text" horizontalalign="center" text="colA4" width="60"/>
                                    <th name="colA5" columntype="text" horizontalalign="center" text="colA5" width="140"/>
                                    <th name="colA6" columntype="double" horizontalalign="far" text="colA6" width="80"/>
                                    <th name="colA7" columntype="int" horizontalalign="far" text="colA7" width="80"/>
                                    <th name="colA8" columntype="int" horizontalalign="far" text="colA8" width="80"/>
                                    <th name="colA9" columntype="int" horizontalalign="far" text="colA9" width="80"/>
                                    <th name="colA10" columntype="text" horizontalalign="center" text="colA10" width="60"/>
                                    <th name="colA11" columntype="text" horizontalalign="center" text="colA11" width="80"/>
                                    <th name="colA12" columntype="double" horizontalalign="far" text="colA12" width="80"/>
                                    <th name="colA13" columntype="double" horizontalalign="far" text="colA13" width="80"/>
                                    <th name="colA14" columntype="double" horizontalalign="far" text="colA14" width="80"/>
                                    <th name="colA15" columntype="text" horizontalalign="center" text="colA15" width="60"/>
                                    <th name="colA16" columntype="text" text="colA16" width="80"/>
                                    <th name="colA18" columntype="text" horizontalalign="center" text="colA18" width="100"/>
                                    <th name="colA19" columntype="text" text="colA19" width="200"/>
                                    <th name="colA20" columntype="text" horizontalalign="center" text="colA20" width="60"/>
                                    <th name="colA21" columntype="text" horizontalalign="center" text="colA21" width="80"/>
                                    <th name="colA22" columntype="text" horizontalalign="center" text="colA22" width="80"/>
                                    <th name="colA23" columntype="text" text="colA23" width="80"/>
                                    <th name="colA24" columntype="text" text="colA24" width="80"/>
                                    <th name="colA25" columntype="text" text="colA25" width="60"/>
                                  </tr>
                                </table>
                              </div>
                            </div>
                            <div type="tabpage" name="pageParkedOrder" text="ParkedOrder" backcolor="none" bordercolor="none">
                              <div type="splitlayout" name="divParkedOrder" dock="fill" layoutstyle="bottomtotop" size="400,400" splitterposition="0,350,400,350" backcolor="none" bordercolor="none">
                                <div name="divDealRecordType" location="-1,200" backcolor="none" bordercolor="none">
                                  <input type="radio" name="rdAllCondition" groupname="condition" checked="true" location="0,4" text="AllCondition" size="100,20"/>
                                  <input type="radio" name="rdPreCondition" groupname="condition" location="80,4" text="PreCondition" size="100,20"/>
                                  <input type="radio" name="rdCondition" groupname="condition" location="160,4" text="Condition" size="100,20"/>
                                  <input type="radio" name="rdSend" groupname="condition" location="240,4" text="Send" size="100,20"/>
                                  <input type="button" name="btnDeleteCondition" location="320,2" size="100,26" text="DeleteCondition"/>
                                  <input type="button" name="btnSendCondition" location="424,2" size="100,26" text="SendCondition"/>
                                  <input type="button" name="btnClearCondition" location="528,2" size="100,26" text="ClearCondition"/>
                                  <label name="lblConditionTip" textcolor="rgba(255,0,0,255)" location="10,30" size="500,20" text="ConditionTip"/>
                                </div>
                                <table name="gridParkedOrder" backcolor="none" bordercolor="none">
                                  <tr>
                                    <th name="colI1" columntype="text" text="colI1" width="100"/>
                                    <th name="colI2" columntype="text" text="colI2" width="80"/>
                                    <th name="colI3" columntype="text" text="colI3" width="250"/>
                                    <th name="colI4" columntype="text" text="colI4" width="60"/>
                                    <th name="colI5" columntype="text" horizontalalign="center" text="colI5" width="80"/>
                                    <th name="colI6" columntype="text" horizontalalign="center" text="colI6" width="80"/>
                                    <th name="colI7" columntype="double" horizontalalign="far" text="colI7" width="80"/>
                                    <th name="colI8" columntype="int" horizontalalign="far" text="colI8" width="80"/>
                                    <th name="colI9" columntype="text" horizontalalign="center" text="colI9" width="80"/>
                                    <th name="colI10" columntype="text" text="colI10" width="60"/>
                                    <th name="colI11" columntype="text" horizontalalign="center" text="colI11" width="80"/>
                                    <th name="colI12" columntype="text" horizontalalign="center" text="colI12" width="120"/>
                                  </tr>
                                </table>
                              </div>
                            </div>
                            <div type="tabpage" name="pageTradeRecord" text="TradeRecord" backcolor="none" bordercolor="none">
                              <div type="splitlayout" name="divTradeRecord" dock="fill" layoutstyle="bottomtotop" size="400,400" splitterposition="0,370,400,370" backcolor="none" bordercolor="none">
                                <div name="divTradeRecordType" backcolor="none" bordercolor="none">
                                  <input type="radio" name="rdDetail" groupname="tradeRecordType" checked="true" location="0,5" text="Detail" size="100,20"/>
                                  <input type="radio" name="rdSummary" groupname="tradeRecordType" location="100,5" text="Summary" size="100,20"/>
                                </div>
                                <div name="divTradeRecordInner" backcolor="none" bordercolor="none">
                                  <table name="gridTradeRecord" dock="fill" backcolor="none" bordercolor="none">
                                    <tr>
                                      <th name="colR1" columntype="text" text="colR1" width="80"/>
                                      <th name="colR2" columntype="text" text="colR2" width="80"/>
                                      <th name="colR3" columntype="text" horizontalalign="center" text="colR3" width="60"/>
                                      <th name="colR4" columntype="text" horizontalalign="center" text="colR4" width="60"/>
                                      <th name="colR5" columntype="double" horizontalalign="far" text="colR5" width="80"/>
                                      <th name="colR6" columntype="int" horizontalalign="far" text="colR6" width="80"/>
                                      <th name="colR7" columntype="text" horizontalalign="center" text="colR7" width="80"/>
                                      <th name="colR8" columntype="text" horizontalalign="center" text="colR8" width="80"/>
                                      <th name="colR9" columntype="text" horizontalalign="center" text="colR9" width="80"/>
                                      <th name="colR10" columntype="text" horizontalalign="center" text="colR10" width="60"/>
                                      <th name="colR11" columntype="text" text="colR11" width="80"/>
                                      <th name="colR12" columntype="double" horizontalalign="far" text="colR12" width="80"/>
                                    </tr>
                                  </table>
                                  <table name="gridTradeStatistics" dock="fill" visible="false" backcolor="none" bordercolor="none">
                                    <tr>
                                      <th name="colS1" columntype="text" text="colS1" width="80"/>
                                      <th name="colS2" columntype="text" text="colS2" width="80"/>
                                      <th name="colS3" columntype="text" horizontalalign="center" text="colS3" width="80"/>
                                      <th name="colS4" columntype="text" horizontalalign="center" text="colS4" width="80"/>
                                      <th name="colS5" columntype="double" horizontalalign="far" text="colS5" width="100"/>
                                      <th name="colS6" columntype="int" horizontalalign="far" text="colS6" width="100"/>
                                      <th name="colS7" columntype="double" horizontalalign="far" text="colS7" width="100"/>
                                      <th name="colS8" columntype="text" horizontalalign="center" text="colS8" width="60"/>
                                    </tr>
                                  </table>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div bordercolor="none" backcolor="none" padding="5,5,5,5">
                      <div type="tab" name="tabQuote" selectedindex="0" size="400,400" dock="fill">
                        <div type="tabpage" name="pagePageQuote" text="PageQuote" bordercolor="none" backcolor="none">
                          <table name="gridLatestData" dock="fill" location="0,0" size="914,160" bordercolor="none" backcolor="none">
                            <tr>
                              <th name="colQ1" columntype="text" text="colQ1" width="80"/>
                              <th name="colQ2" columntype="text" text="colQ2" width="100"/>
                              <th name="colQ3" columntype="double" horizontalalign="far" text="colQ3" width="60"/>
                              <th name="colQ4" columntype="double" horizontalalign="far" text="colQ4" width="60"/>
                              <th name="colQ5" columntype="double" horizontalalign="far" text="colQ5" width="60" location="300,0" size="60,20"/>
                              <th name="colQ6" columntype="int" horizontalalign="far" text="colQ6" width="60" location="360,0" size="60,20"/>
                              <th name="colQ7" columntype="double" horizontalalign="far" text="colQ7" width="60"/>
                              <th name="colQ8" columntype="int" horizontalalign="far" text="colQ8" width="60"/>
                              <th name="colQ9" columntype="int" horizontalalign="far" text="colQ9" width="60"/>
                              <th name="colQ10" columntype="int" horizontalalign="far" text="colQ10" width="60"/>
                              <th name="colQ11" columntype="double" horizontalalign="far" text="colQ11" width="60"/>
                              <th name="colQ12" columntype="double" horizontalalign="far" text="colQ12" width="60"/>
                              <th name="colQ13" columntype="double" horizontalalign="far" text="colQ13" width="60"/>
                              <th name="colQ14" columntype="double" horizontalalign="far" text="colQ14" width="60"/>
                              <th name="colQ15" columntype="double" horizontalalign="far" text="colQ15" width="60"/>
                              <th name="colQ16" columntype="double" horizontalalign="far" text="colQ16" width="60"/>
                              <th name="colQ17" columntype="int" horizontalalign="far" text="colQ17" width="60"/>
                              <th name="colQ18" columntype="percent" horizontalalign="far" text="colQ18" width="60"/>
                              <th name="colQ19" columntype="double" horizontalalign="far" text="colQ19" width="60"/>
                              <th name="colQ20" columntype="thousands" horizontalalign="far" text="colQ20" width="100"/>
                              <th name="colQ21" columntype="text" text="colQ21" width="60"/>
                              <th name="colQ22" columntype="text" horizontalalign="center" text="colQ22" width="100"/>
                              <th name="colQ23" columntype="double" text="colQ23" width="60"/>
                              <th name="colQ24" columntype="double" text="colQ24" width="60"/>
                              <th name="colQ25" columntype="double" text="colQ25" width="60"/>
                              <th name="colQ26" columntype="double" text="colQ26" width="80"/>
                              <th name="colQ27" columntype="int" text="colQ27" width="80"/>
                              <th name="colQ28" columntype="double" text="colQ28" width="80"/>
                              <th name="colQ29" columntype="int" text="colQ29" width="80"/>
                              <th name="colQ30" columntype="double" text="colQ30" width="80"/>
                              <th name="colQ31" columntype="int" text="colQ31" width="80"/>
                              <th name="colQ32" columntype="int" text="colQ32" width="80"/>
                            </tr>
                          </table>
                        </div>
                        <div type="tabpage" name="pageContracts" text="Contracts" bordercolor="none" backcolor="none">
                          <table name="gridContracts" dock="fill" bordercolor="none" backcolor="none">
                            <tr>
                              <th name="colC1" columntype="text" text="colC1" width="80"/>
                              <th name="colC2" columntype="text" text="colC2" width="60"/>
                              <th name="colC3" columntype="text" text="colC3" width="100"/>
                              <th name="colC4" columntype="text" text="colC4" width="60"/>
                              <th name="colC5" columntype="int" horizontalalign="far" text="colC5" width="100"/>
                              <th name="colC6" columntype="double" horizontalalign="far" text="colC6" width="100"/>
                              <th name="colC7" columntype="text" horizontalalign="center" text="colC7" width="100"/>
                              <th name="colC8" columntype="text" horizontalalign="center" text="colC8" width="100"/>
                              <th name="colC9" columntype="percent" horizontalalign="far" text="colC9" width="100"/>
                              <th name="colC10" columntype="percent" horizontalalign="far" text="colC10" width="100"/>
                              <th name="colC11" columntype="double" horizontalalign="far" text="colC11" width="100"/>
                              <th name="colC12" columntype="double" horizontalalign="far" text="colC12" width="100"/>
                              <th name="colC13" columntype="double" horizontalalign="far" text="colC13" width="100"/>
                              <th name="colC14" columntype="percent" horizontalalign="far" text="colC14" width="100"/>
                              <th name="colC15" columntype="percent" horizontalalign="far" text="colC15" width="100"/>
                              <th name="colC16" columntype="percent" horizontalalign="far" text="colC16" width="100"/>
                              <th name="colC17" columntype="int" horizontalalign="far" text="colC17" width="100"/>
                              <th name="colC18" columntype="int" horizontalalign="far" text="colC18" width="100"/>
                            </tr>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div bordercolor="none" padding="5,5,5,5">
                    <div type="tab" name="tabInvestorPosition" selectedindex="0" dock="fill" backcolor="none">
                      <div type="tabpage" name="pagePageInvestorPosition" text="InvestorPosition" bordercolor="none" backcolor="none">
                        <div type="splitlayout" name="divInvestorPosition" dock="fill" layoutstyle="bottomtotop" size="400,400" splitterposition="0,370,400,370" bordercolor="none" backcolor="none">
                          <div name="divInvestorPositionBottom" bordercolor="none" backcolor="none">
                            <input type="radio" name="cbInvestorPosition" checked="true" location="5,5" groupname="InvestorPosition" size="80,20" text="InvestorPosition"/>
                            <input type="radio" name="cbInvestorPositionDetail" groupname="InvestorPosition" location="80,5" size="80,20" text="InvestorPositionDetail"/>
                            <input type="radio" name="cbCompPosition" groupname="InvestorPosition" location="180,3" size="80,23" text="CompPosition" visible="false"/>
                            <input type="button" name="btnOpenInterestIP" location="300,3" size="80,23" text="OpenInterest" height="24"/>
                            <input type="button" name="btnMarketPositionIP" location="390,3" size="80,23" text="MarketPosition" height="24"/>
                            <input type="button" name="btnMarketBackhandIP" location="480,3" size="80,23" text="MarketBackhand" height="24"/>
                          </div>
                          <div name="divInvestorPositionTop" bordercolor="none" backcolor="none">
                            <table name="gridInvestorPosition" dock="fill" bordercolor="none" backcolor="none">
                              <tr>
                                <th name="colP1" columntype="text" text="colP1" width="80"/>
                                <th name="colP2" columntype="text" horizontalalign="center" text="colP2" width="60"/>
                                <th name="colP3" columntype="int" horizontalalign="far" text="colP3" width="60"/>
                                <th name="colP4" columntype="int" horizontalalign="far" text="colP4" width="60"/>
                                <th name="colP5" columntype="int" horizontalalign="far" text="colP5" width="60"/>
                                <th name="colP6" columntype="int" horizontalalign="far" text="colP6" width="60"/>
                                <th name="colP7" columntype="double" horizontalalign="far" text="colP7" width="80"/>
                                <th name="colP8" columntype="thousands" horizontalalign="far" text="colP8" width="100"/>
                                <th name="colP9" columntype="thousands" horizontalalign="far" text="colP9" width="100"/>
                                <th name="colP10" columntype="text" horizontalalign="center" text="colP10" width="60"/>
                                <th name="col111" columntype="text" text="colP11" width="80"/>
                                <th name="colP12" columntype="int" horizontalalign="far" text="colP12" width="60"/>
                                <th name="colP13" columntype="int" horizontalalign="far" text="colP13" width="60"/>
                                <th name="colP14" columntype="int" horizontalalign="far" text="colP14" width="60"/>
                                <th name="colP15" columntype="int" horizontalalign="far" text="colP15" width="60"/>
                                <th name="colP16" columntype="int" horizontalalign="far" text="colP16" width="100"/>
                                <th name="colP17" columntype="int" horizontalalign="far" text="colP17" width="100"/>
                                <th name="colP18" columntype="int" horizontalalign="far" text="colP18" width="100"/>
                                <th name="colP19" columntype="int" horizontalalign="far" text="colP19" width="100"/>
                                <th name="colP20" columntype="int" horizontalalign="far" text="colP20" width="100"/>
                                <th name="colP21" columntype="int" horizontalalign="far" text="colP21" width="80"/>
                                <th name="col122" columntype="int" horizontalalign="far" text="colP22" width="80"/>
                                <th name="colP23" columntype="double" horizontalalign="far" text="colP23" width="100"/>
                                <th name="colP24" columntype="double" horizontalalign="far" text="colP24" width="100"/>
                                <th name="colP25" columntype="double" horizontalalign="far" text="colP25" width="100"/>
                                <th name="colP26" columntype="thousands" horizontalalign="far" text="colP26" width="100"/>
                                <th name="colP27" columntype="thousands" horizontalalign="far" text="colP27" width="80"/>
                                <th name="colP28" columntype="int" horizontalalign="far" text="colP28" width="80"/>
                                <th name="colP29" columntype="int" horizontalalign="far" text="colP29" width="80"/>
                                <th name="colP30" columntype="double" horizontalalign="far" text="colP30" width="80"/>
                                <th name="colP31" columntype="double" horizontalalign="far" text="colP31" width="80"/>
                                <th name="colP32" columntype="text" text="colP32" width="100"/>
                                <th name="colP33" columntype="text" text="colP33" width="100"/>
                                <th name="colP34" columntype="text" text="colP34" width="100"/>
                              </tr>
                            </table>
                            <table name="gridInvestorPositionDetail" dock="fill" visible="false" bordercolor="none" backcolor="none">
                              <tr>
                                <th name="colT1" columntype="text" text="colT1" width="80"/>
                                <th name="colT2" columntype="text" text="colT2" width="80"/>
                                <th name="colT3" columntype="text" horizontalalign="center" text="colT3" width="60"/>
                                <th name="colT4" columntype="int" horizontalalign="far" text="colT4" width="60"/>
                                <th name="colT5" columntype="double" horizontalalign="far" text="colT5" width="80"/>
                                <th name="colT6" columntype="thousands" horizontalalign="far" text="colT6" width="100"/>
                                <th name="colT7" columntype="text" text="colT7" width="80"/>
                                <th name="colT8" columntype="text" horizontalalign="center" text="colT8" width="60"/>
                                <th name="colT9" columntype="text" horizontalalign="center" text="colT9" width="100"/>
                                <th name="colT10" columntype="thousands" horizontalalign="far" text="colT10" width="100"/>
                                <th name="colT11" columntype="thousands" horizontalalign="far" text="colT11" width="100"/>
                                <th name="colT12" columntype="text" text="colT12" width="80"/>
                                <th name="colT13" columntype="text" text="colT13" width="100"/>
                                <th name="colT14" columntype="double" horizontalalign="far" text="colT14" width="80"/>
                                <th name="colT15" columntype="int" horizontalalign="far" text="colT15" width="80"/>
                                <th name="colT16" columntype="thousands" horizontalalign="far" text="colT16" width="100"/>
                                <th name="colT17" columntype="double" horizontalalign="far" text="colT17" width="80"/>
                                <th name="colT18" columntype="int" horizontalalign="far" text="colT18" width="100"/>
                              </tr>
                            </table>
                            <table name="gridInvestorCombinePositionDetail" dock="fill" visible="false" bordercolor="none" backcolor="none">
                              <tr>
                                <th name="colM1" columntype="text" text="colM1" width="120"/>
                                <th name="colM2" columntype="text" horizontalalign="center" text="colM2" width="60"/>
                                <th name="colM3" columntype="int" horizontalalign="far" text="colM3" width="60"/>
                                <th name="colM4" columntype="double" horizontalalign="far" text="colM4" width="100"/>
                                <th name="colM5" columntype="text" horizontalalign="center" text="colM5" width="60"/>
                              </tr>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </body>
        </html>"#;
	render_facecat(xml.to_string());
	invalidate(&context);
    
    let closure = Closure::wrap(Box::new(move |_event: web_sys::Event| {
        let window3 = web_sys::window().expect("should have a window in this context");
        let document3 = window3.document().expect("window should have a document");
        unsafe{
            let device_pixel_ratio = window3.device_pixel_ratio();
            M_CANVAS_WIDTH = document3.document_element().expect("REASON").client_width() as f32;
            M_CANVAS_HEIGHT = document3.document_element().expect("REASON").client_height() as f32;
            canvas.set_width((M_CANVAS_WIDTH * device_pixel_ratio as f32) as u32);
		    canvas.set_height((M_CANVAS_HEIGHT * device_pixel_ratio as f32) as u32);
		    canvas.style().set_property(&("width".to_string()), &(M_CANVAS_WIDTH.to_string() + "px")).unwrap();
		    canvas.style().set_property(&("height".to_string()), &(M_CANVAS_HEIGHT.to_string() + "px")).unwrap();
        }
	    context.scale(device_pixel_ratio, device_pixel_ratio).unwrap();
        let top_views3 = get_top_views();
	    update_view_default(top_views3);
        invalidate(&context);
    }) as Box<dyn FnMut(_)>);
    let window2 = web_sys::window().expect("should have a window in this context");
    window2.add_event_listener_with_callback("resize", closure.as_ref().unchecked_ref()).unwrap();
    closure.forget();

    let input: web_sys::HtmlInputElement = document.create_element("input").unwrap().dyn_into().unwrap();
    input.set_type("text");
    input.set_attribute("id", "RUSTINPUTTEXT").unwrap();
    input.style().set_property("position", "absolute").unwrap();
    input.style().set_property("display", "none").unwrap();
    input.style().set_property("box-sizing", "border-box").unwrap();
    document.body().unwrap().append_child(&input)?;

    Ok(())
    //wasm-pack build --release --target web
}
